<template>
  <div class="show-window" @click.stop="clickHandle">
    <div :class="['show-window-img', {'show-window-product-img':isProduct}]">
      <ImageVideo lazy-load :host="host" :src="src" fit="fill" />
    </div>
    <div class="show-window-desc">
      <p class="show-window-name" :style="{'-webkit-line-clamp': lineClamp}">{{ name }}</p>
      <div v-if="showTags.length" class="show-window-tips">
        <span v-for="(tag,i) in showTags" :key="i">{{ tag }}</span>
      </div>
      <p v-if="showPrice&&show" class="show-window-price">
        <span class="sub">&yen;</span>
        <span>{{ integer }}</span>
        <span class="sub">.{{ decimals || '00' }}</span>
      </p>
      <p v-else-if="show" class="show-window-price">暂无报价</p>
    </div>
  </div>
</template>
<script>
import errorSrc from '@/assets/error.png'
import ImageVideo from '@/components/ImageVideo'
export default {
  name: 'ShowWindow',
  components: {
    ImageVideo
  },
  props: {
    src: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    price: {
      type: [String, Number],
      default: ''
    },
    tagList: {
      type: Array,
      default: () => []
    },
    show: {
      type: Boolean,
      default: true
    },
    isProduct: {
      type: Boolean,
      default: false
    },
    lineClamp: {
      type: Number,
      default: 1
    },
    host: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      errorSrc
    }
  },
  computed: {
    integer() {
      return this.price.toString().split('.')[0]
    },
    decimals() {
      const p = this.price.toString().split('.')
      return p.length >= 2 ? p[1] : ''
    },
    showPrice() {
      return this.price < 999999 && this.$isDef(this.price) && !this.$isEmpty(this.price)
    },
    showTags() {
      const tmps = this.tagList.filter(v => ![null, undefined, ''].includes(v))
      return tmps.slice(0, 2)
    }
  },
  methods: {
    clickHandle() {
      this.$emit('click')
    }
  }
}
</script>
<style lang="less">
.show-window{
  --width: calc(50vw - 18px);
  width: var(--width);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  background: #FFFFFF;
  box-shadow: 0px 0px 30px 0px rgba(60,73,88,0.04);
  border-radius: 9px;
  .show-window-img{
    flex: 0 0 auto;
    height: calc(var(--width) * 146 / 170);
    background: #fff;
  }
  .show-window-product-img{
    height: var(--width) !important;
  }
  .show-window-tips{
    margin-top: 2px;
    padding-left:10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    span{
      display: inline-flex;
      padding: 0 3px;
      margin-top: 6px;
      height: 18px;
      line-height: 18px;
      background: rgba(240, 213, 178, 0.5) ;
      // background: linear-gradient(133deg, rgba(250, 247, 239, 0.5) 0%, rgba(240, 213, 178, 0.5) 46%, rgba(244, 204, 170, 0.5) 100%);
      box-shadow: 0px 0px 9px 0px rgba(176,123,77,0.13), inset -2px -2px 9px 0px rgba(255,255,255,0.29);
      border-radius: 4px;
      font-size: 10px;
      color: #B7854F;
      margin-right: 6px;
    }
  }
  .show-window-desc{
    flex: 0 0 auto;
    padding-bottom: 10px;
    .show-window-name{
      color: #333;
      font-size: 14px;
      font-weight: 500;
      // white-space: nowrap;
      // line-height: 16px;
      // height: 32px;
      line-height: 18px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      padding: 10px 10px 0 10px;
    }
    .show-window-price{
      margin-top: 12px;
      padding: 0 10px;
      line-height: 18px;
      color: #F15643;
      font-size: 16px;
      font-weight: 500;
      .sub{
        display: inline-block;
        font-size: 12px;
      }
    }
  }
  // 失败图片定位样式
  .van-image__error, .van-image__loading{
    position: relative;
  }
}
</style>
